<template>
    <section
        :style="{
            paddingTop: confDiy.paddingTop + 'px',
            paddingBottom: confDiy.paddingBottom + 'px',
            marginTop: confDiy.marginTop + 'px',
            marginBottom: confDiy.marginBottom + 'px',
            background: `linear-gradient(
                ${confDiy.bgEdg}deg,
                ${confDiy.bgColorOne},
                ${confDiy.bgColorTow},
                ${confDiy.bgColorThree})`
        }"
    >
        <div class="m-auto px-10">
            <div
                v-if="confDiy.title || confDiy.intro"
                class="flex flex-col gap-1.5"
                :style="{ marginBottom: confDiy.headerBottom + 'px' }"
            >
                <h3
                    v-if="confDiy.title"
                    class="text-center text-7xl font-bold"
                    :style="{ color: confDiy.titleColor }"
                >
                    {{ confDiy.title }}
                </h3>

                <p
                    v-if="confDiy.intro"
                    class="text-center"
                    :style="{ color: confDiy.introColor }"
                >
                    {{ confDiy.intro }}
                </p>
            </div>

            <div class="flex flex-col gap-6 relative">
                <template  v-for="(item, index) in dataDiy">
                    <div
                        v-if="item.isEnable"
                        :key="index"
                        class="p-6 flex items-center justify-between bg-page rounded-xl"
                        :style="{ backgroundColor: item.bgColor }"
                    >
                        <!-- 左 -->
                        <div class="flex flex-col w-1/3 ml-5 mr-4">
                            <div
                                v-if="item.icon"
                                class="p-2 mb-5 w-14 h-14"
                            >
                                <el-image
                                    :src="appStore.toAbsoluteUrl(item.icon)"
                                    class="w-full h-full rounded"
                                />
                            </div>

                            <h2
                                v-if="item.name"
                                class="mb-2 text-base md:text-5xl font-bold"
                                :style="{ color: item.nameColor }"
                            >
                                {{ item.name }}
                            </h2>

                            <p
                                v-if="item.desc"
                                class="text-base"
                                :style="{ color: item.descColor }"
                            >
                                {{ item.desc }}
                            </p>

                            <a
                                v-if="item.more"
                                class="block mt-10 text-baseÎ cursor-pointer hover:opacity-80"
                                :style="{ color: item.moreColor }"
                            >
                                {{ item.more }}
                            </a>
                        </div>
                        <!-- 右 -->
                        <div class="flex justify-center w-3/5 min-h-[230px] max-h-[420px] rounded-lg">
                            <el-image
                                v-if="item.img"
                                :src="appStore.toAbsoluteUrl(item.img)"
                                :lazy="true"
                                :alt="item.name"
                            />
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { FacultyConfigType, FacultyDataType } from '../index.ts'
import useAppStore from '@/stores/modules/app'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as FacultyConfigType,
            data: [] as FacultyDataType[]
        })
    }
})

const appStore = useAppStore()

// 装修数据
const confDiy = ref({} as FacultyConfigType)
const dataDiy = ref([] as FacultyDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>
